<template>
  <div>
    <el-row>
      <el-col :span="24" style="padding: 5px;">
        <el-card shadow="never">
          <span style="color: #409EFF;">{{ userInfo.username }}</span> 开始您一天的工作吧！
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14" style="padding: 5px;">
        <el-card shadow="never" style="height: 200px;">
          <div style="padding-left: 5px;">
            <h4 style="margin-top: 0px; margin-bottom: 0px;">最近访问</h4>
          </div>
          <div class="router-wrap">
            <div class="router-item-wrap" v-for="(item, index) in lastRouteList" :key="index">
              <div class="router-item" @click="handleRoute(item)">
                <el-text truncated>
                  {{ item.menuName }}
                </el-text>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10" style="padding: 5px;">
        <el-card shadow="never" body-style="padding: 0;">
          <el-calendar>
            <template #date-cell="{ data }">
              <p :class="data.isSelected ? 'is-selected' : ''">
                {{ data.day.split('-').slice(1).join('-') }}
                {{ data.isSelected ? '✔️' : '' }}
              </p>
            </template>
          </el-calendar>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue'
import { userStore } from '@/store/userStore'
import { lastRouteStore } from '@/store/menuStore'
import { RouteData } from '@/data/MenuData'
import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router'

const { userInfo } = storeToRefs(userStore())
const { lastRouteList } = storeToRefs(lastRouteStore())
const router = useRouter()

onMounted(() => {
  
})

function handleRoute(data: RouteData){
  router.replace({ path: data.path })
}

</script>

<style lang="less" scoped>
.router-wrap{
  display: flex;
  flex-wrap: wrap;

  .router-item-wrap{
    width: 120px;
    height: 30px;
    padding: 5px;

    .router-item{
      padding: 5px;
      height: 20px;
      background-color: #f4f6fa;
      display: flex;
      align-items: center;
      cursor: pointer;
      justify-content: center;
      border-radius: 5px;
      font-size: 14px;

      .el-text:hover{
        color: #409EFF;
      }
    }
  }
}

.is-selected {
  color: #1989fa;
}
</style>